<template>
    <el-card style="height: 120px;">
        <el-form :inline="true" class="form">
            <el-form-item label="用户名:">
                <el-input placeholder="请输入搜索用户名" v-model="usernameLike"></el-input>
            </el-form-item>
            <el-form-item label="请求唯一标识:">
                <el-input placeholder="请输入请求唯一标识" v-model="requestId"></el-input>
            </el-form-item>
            <el-form-item label="响应码:">
                <el-input placeholder="请输入响应码" v-model="codeLike"></el-input>
            </el-form-item>
            <el-form-item label="用户类型:">
                <el-select v-model="type" placeholder="请选择用户操作类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="请选择时间范围">
                <el-date-picker
                        v-model="selectTime"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="default" @click="search">搜索</el-button>
                <el-button type="primary" size="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="margin: 10px 0px;">
        <el-button type="primary" size="default" :disabled="selectIdArr.length ? false : true"
                   @click="deleteSelected">批量删除
        </el-button>
        <!-- table展示用户信息 -->
        <el-table @selection-change="selectChange" style="margin: 10px 0px;" border :data="logArr">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="#" align="center" type="index"></el-table-column>
            <el-table-column label="用户名字" align="center" prop="username" show-overflow-tooltip></el-table-column>
            <el-table-column label="请求id" align="center" prop="requestId" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作名称" align="center" prop="operation" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="响应码" align="center" show-overflow-tooltip>
                <template #="{row,$index}">
                    <el-button :type=setStatusButto(row) plain> {{ row.code }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="用户类型" align="center" show-overflow-tooltip>
                <template #="{row,$index}">
                    <el-button type="primary" plain> {{ row.typeStr }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip></el-table-column>

            <el-table-column label="操作" width="300px" align="center">
                <template #="{ row, $index }">
                    <el-button type="primary" size="small" icon="InfoFilled" @click="findLog(row)">详情</el-button>
                    <el-popconfirm :title="`你确定要删除${row.username}?`" width="260px" @confirm="deleteLog(row.id)">
                        <template #reference>
                            <el-button type="primary" size="small" icon="Delete">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[5, 7, 9, 11]"
                       :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="items"
                       @current-change="getHasLog"
                       @size-change="handler"/>
    </el-card>


    <!-- 抽屉组件:展示日志详情 -->
    <el-drawer v-model="drawer" size="700" >
        <!-- 标题部分 -->
        <template #header>
            <h4>查看日志的详情</h4>
        </template>
        <template #default>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">操作人</el-col>
                <el-col :span="18">{{ logInfo.username }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">操作类型</el-col>
                <el-col :span="18">{{ logInfo.typeStr }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">操作名称</el-col>
                <el-col :span="18">{{ logInfo.operation }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">响应耗时</el-col>
                <el-col :span="18">{{ logInfo.time }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">执行方法名</el-col>
                <el-col :span="18">{{ logInfo.method }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">执行参数</el-col>
                <el-col :span="18">{{ logInfo.params }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">ip</el-col>
                <el-col :span="18">{{ logInfo.ip }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">响应码</el-col>
                <el-col :span="18">{{ logInfo.code }}</el-col>
            </el-row>
            <el-row style="margin:10px 0px;">
                <el-col :span="6">响应消息</el-col>
                <el-col :span="18">{{ logInfo.msg }}</el-col>
            </el-row>

        </template>
    </el-drawer>
</template>
<script setup lang="ts">
    import useLayOutSettingStore from '@/store/modules/setting'
    import {onMounted, reactive, ref} from 'vue';
    import {ElMessage} from 'element-plus';
    import {reqBatchDelLog, reqLogInfo, reqLogList} from "@/api/sys/log";
    import {useRouter} from 'vue-router';
    import {LogInfo, LogInfoReponseData, LogListReponseData} from "@/api/sys/log/type";
    import {formatDate} from "@/utils/time";

    let $router = useRouter();
    //默认页码
    let page = ref<number>(0);
    //一页展示几条数据
    let pageSize = ref<number>(5);
    let usernameLike = ref<string>('');
    let type = ref<number>(1);
    let codeLike = ref<string>('');
    let requestId = ref<string>('');
    const selectTime = ref<[Date, Date]>([
        new Date(new Date() -24*60*60*1000),
        new Date(),
    ])
    console.log(selectTime)

    //总个数
    let items = ref<number>(0);
    //存储全部用户的数组
    let logArr = ref<LogInfoReponseData>([]);
    //定义响应式数据控制抽屉的显示与隐藏
    let drawer = ref<boolean>(false);

    let batchDelLogForm = reactive<any>({
        ids:[]
    });

    const options = [
        {
            value: 1,
            label: '管理员操作',
        },
        {
            value: 2,
            label: 'app用户操作',
        },
        {
            value: null,
            label: '全部数据',
        }
    ]
    const value = ref(0)
    //准备一个数组存储批量删除的用户的ID
    let selectIdArr = ref<LogInfo[]>([]);
    let logInfo = ref<LogInfo>({});
    //定义响应式数据:收集用户输入进来的关键字
    //获取模板setting仓库
    let settingStore = useLayOutSettingStore();
    //组件挂载完毕
    onMounted(() => {
        getHasLog();
    });
    //获取全部已有的用户信息
    const getHasLog = async (pager = 1) => {
        //收集当前页码
        page.value = pager;
        let result:LogListReponseData;
        if (selectTime.value){
            result = await reqLogList(page.value-1, pageSize.value, usernameLike.value, type.value,
                codeLike.value,formatDate(selectTime?.value[0]),formatDate(selectTime?.value[1]),requestId.value);
        }else {
            result = await reqLogList(page.value, pageSize.value, usernameLike.value, type.value,
                codeLike.value,'','',requestId.value);
        }

        if (result.code == "200") {
            items.value = result.result.items;
            logArr.value = result.result.data;
        }
    }
    //分页器下拉菜单的自定义事件的回调
    const handler = () => {
        getHasLog();
    }

    //table复选框勾选的时候会触发的事件
    const selectChange = (value: any) => {
        selectIdArr.value = value;
    }
    //批量删除按钮的回调
    const deleteSelected = async () => {

        //整理批量删除的参数
        let idsList: number[] = selectIdArr.value.map(item => {
            return item.id;
        });
        //整理批量删除的参数
        batchDelLogForm.ids = idsList
        //批量删除的请求
        let result: any = await reqBatchDelLog(batchDelLogForm);
        if (result.code == 200) {
            ElMessage({ type: 'success', message: '删除成功' });
        } else {
            ElMessage({ type: 'error', message: '删除失败'+result.msg });
        }
        getHasLog(logArr.value.length > 1 ? page.value : page.value - 1);
    }

    const deleteLog = async (id: number) => {
        //整理批量删除的参数
        let idsList: number[] = [id];
        batchDelLogForm.ids = idsList;
        //批量删除的请求
        let result: any = await reqBatchDelLog(batchDelLogForm);
        if (result.code == 200) {
            ElMessage({type: 'success', message: '删除成功'});
        } else {
            ElMessage({type: 'error', message: '删除失败' + result.msg});
        }
        getHasLog(logArr.value.length > 1 ? page.value : page.value - 1);
    }

    //搜索按钮的回调
    const search = () => {
        //根据关键字获取相应的用户数据
        getHasLog();
        //清空关键字
        usernameLike.value = '';
        type.value = 1;
    }
    //重置按钮
    const reset = () => {
        settingStore.refsh = !settingStore.refsh;
    }

    const findLog = async (row: LogInfo) => {
        drawer.value = true;
        //获取已有商品详情数据
        let result: LogInfoReponseData = await reqLogInfo((row.id as number));
        //存储已有的SKU
        logInfo.value = result.result;
    }

    const setStatusButto = (row: any) =>{
        if (row.code =='200'){
            return 'success'
        } else {
            return 'danger'
        }
    }
</script>

<style scoped>
    .form {
        justify-content: space-between;
        align-items: center;
    }
</style>
